<template>
  <div v-title.async="{value: `Sign up& get ${certificateInfo.showAmount || ''}`}">
    <topbar :title="title" />
    <img src="~assets/coupon/c1.png" class="img-block">
    <div :class="$style.coupon">
      <img @click="signUp" src="~assets/coupon/c2.png" class="img-block">
      <span>{{certificateInfo.showAmount}}</span>
    </div>
    <img src="~assets/coupon/c3.png" class="img-block">
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { topbar } from 'components'

export default {
  name: 'signUpGetCoupon',
  components: {
    topbar,
  },
  computed: {
    ...mapState({
      certificateInfo: state => state.coupon.certificateInfo,
    }),
  },
  data() {
    return {
      title: '',
    }
  },
  created() {
    this.$store.dispatch('getCertificate', this.$route.query.activityId)
      .then((res) => {
        this.title = `Sign up& get ${res.showAmount || ''}`
      })
  },
  methods: {
    signUp() {
      sessionStorage.couponActivityId = this.$route.query.activityId
      setTimeout(() => {
        this.$router.push({
          path: '/login',
        })
      }, 10)
      // console.log()
    },
  },
}
</script>

<style module lang="scss">
.coupon {
  position: relative;
  span {
    position: absolute;
    top: 20%;
    right: 42%;
    color: #FFF23A;
    font-size: 34px;
    transform: rotate(-3deg);
    font-weight: 600;
    letter-spacing: 2px;
    text-shadow: 2px 5px 3px #C42615;
  }
}
</style>
